<section>
  <header>
    <h3>类型</h3>
  </header>
  <article>
    <h4>一组按钮</h4>
    <p>通过div.btn-group包含多个button</p>
    <div class="example">
      <div class="btn-group">
        <button type="button" class="btn">左</button>
        <button type="button" class="btn">中</button>
        <button type="button" class="btn">右</button>
      </div>
    </div>
    <h4>多组按钮</h4>
    <p>通过div.btn-toolbar包含.div.btn-group</p>
    <div class="example">
      <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
          <button class="btn">1</button>
          <button class="btn">2</button>
          <button class="btn">3</button>
          <button class="btn">4</button>
        </div>
        <div class="btn-group">
          <button class="btn">5</button>
          <button class="btn">6</button>
          <button class="btn">7</button>
        </div>
        <div class="btn-group">
          <button class="btn">8</button>
        </div>
      </div>
    </div>
    <h4>垂直按钮组</h4>
    <p>通过div.btn-group-vertical实现</p>
    <div class="example">
      <div class="btn-group btn-group-vertical">
        <button type="button" class="btn">上</button>
        <button type="button" class="btn">中</button>
        <button type="button" class="btn">下</button>
      </div>
    </div>
  </article>
</section>

<section>
  <header><h3>变化</h3></header>
  <article>
    <h4>基本下拉按钮组</h4>
    <p>将<code>.input-group</code>放置于另一个<code>.input-group</code>中。</p>
    <div class="example">
      <div class="btn-group">
        <button type="button" class="btn btn-default">吃</button>
        <button type="button" class="btn btn-default">喝</button>

        <div class="btn-group">
          <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            更多
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
            <li><a href="#">拉</a></li>
            <li><a href="#">撒</a></li>
          </ul>
        </div>
      </div>
    </div>
    <h4>分裂式下拉按钮组</h4>
    <p>基本按钮组的变形，将第二个按钮改成图标即可。</p>
    <div class="example">
      <div class="btn-group">
        <button type="button" class="btn btn-danger">操作</button>
        <div class="btn-group">
          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">操作</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">编辑</a></li>
            <li><a href="#">删除</a></li>
            <li class="divider"></li>
            <li><a href="#">增加</a></li>
          </ul>
        </div>
      </div>
    </div>
    <h4>上拉按钮组</h4>
    <p>通过div.dropup实现</p>
    <div class="example">
      <div class="btn-group dropup">
        <button type="button" class="btn btn-danger">操作</button>
        <div class="btn-group">
          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">操作</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">编辑</a></li>
            <li><a href="#">删除</a></li>
            <li class="divider"></li>
            <li><a href="#">增加</a></li>
          </ul>
        </div>
      </div>
    </div>
    <h4>大小</h4>
    <p>通过.btn-lg .btn-sm .btn-xs实现</p>
    <div class="example">
      <div class="btn-toolbar" style="margin: 0;">
        <div class="btn-group">
          <button type="button" class="btn btn-lg">左</button>
          <button type="button" class="btn btn-lg">中</button>
          <button type="button" class="btn btn-lg">右</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn">左</button>
          <button type="button" class="btn">中</button>
          <button type="button" class="btn">右</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-sm">左</button>
          <button type="button" class="btn btn-sm">中</button>
          <button type="button" class="btn btn-sm">右</button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-xs">左</button>
          <button type="button" class="btn btn-xs">中</button>
          <button type="button" class="btn btn-xs">右</button>
        </div>
      </div>
    </div>
    <h4>颜色</h4>
    <div class="example">
      <div class="btn-group">
        <button type="button" class="btn">默认</button>
        <button type="button" class="btn btn-primary">.btn-primary</button>
        <button type="button" class="btn btn-warning">.btn-warning</button>
        <button type="button" class="btn btn-danger">.btn-danger</button>
        <button type="button" class="btn btn-success">.btn-success</button>
        <button type="button" class="btn btn-info">.btn-info</button>
      </div>
    </div>
  </article>
</section>

